import React, { useState } from "react";
import "./index.css";
import { useNavigate } from "react-router-dom";
const Index = () => {
  const navigate = useNavigate();
  const [formdata, setFormdata] = useState(
    JSON.parse(localStorage.getItem("form") || "[]")
  );
  const [activeIndex, setActiveIndex] = useState(0);
  console.log(formdata);
  const btn = () => {
    //跳转支付页面
    navigate("/pay", { state: formdata });
  };
  return (
    <div className="container">
      <div className="alert">
        <strong>提示:</strong>急重症患者不适合网上咨询，请即刻前往当地医院急诊。
      </div>
      <h2>您要为哪位患者咨询？</h2>
      <p>错误的患者信息可能会误导医生，请慎重选择</p>
      <div className="patient-box">
        <div className="xj">+ 新建患者</div>
        {formdata.map((item: any, index: any) => {
          return (
            <div
              key={index}
              onClick={() => setActiveIndex(index)}
              style={{
                backgroundColor: activeIndex === index ? "lightblue" : "white",
              }}
            >
              <div>{item.username}</div>
            </div>
          );
        })}
      </div>
      <div>
        <button className="btn" onClick={() => btn()}>
          确定
        </button>
      </div>
    </div>
  );
};

export default Index;
